<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-radio-group v-model="radio1">
          <fu-radio :label="1">选项1</fu-radio>
          <fu-radio :label="2">选项2</fu-radio>
        </fu-radio-group>
        <view class="demo-block__value">当前选中：{{ radio1 }}</view>
      </view>
    </view>
    
    <!-- 禁用状态 -->
    <view class="demo-block">
      <view class="demo-block__title">禁用状态</view>
      <view class="demo-block__content">
        <fu-radio-group v-model="radio2">
          <fu-radio :label="1" disabled>禁用选项1</fu-radio>
          <fu-radio :label="2" disabled>禁用选项2</fu-radio>
        </fu-radio-group>
        <view class="demo-block__value">当前选中：{{ radio2 }}</view>
      </view>
    </view>
    
    <!-- 不同尺寸 -->
    <view class="demo-block">
      <view class="demo-block__title">不同尺寸</view>
      <view class="demo-block__content">
        <fu-radio-group v-model="radio3">
          <fu-radio :label="1" size="large">大号选项</fu-radio>
          <fu-radio :label="2">普通选项</fu-radio>
          <fu-radio :label="3" size="small">小号选项</fu-radio>
          <fu-radio :label="4" size="mini">迷你选项</fu-radio>
        </fu-radio-group>
      </view>
    </view>
    
    <!-- 自定义内容 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义内容</view>
      <view class="demo-block__content">
        <fu-radio-group v-model="radio4">
          <fu-radio :label="1">
            <text class="custom-text">自定义文本</text>
          </fu-radio>
          <fu-radio :label="2">
            <view class="custom-content">
              <text>标题</text>
              <text>描述信息</text>
            </view>
          </fu-radio>
        </fu-radio-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radio1: 1,
      radio2: 1,
      radio3: 1,
      radio4: 1
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    .fu-radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
    }
  }
  
  &__value {
    margin-top: 20rpx;
    font-size: var(--fu-font-size-sm);
    color: var(--fu-text-color-secondary);
  }
}

.custom-text {
  color: var(--fu-primary-color);
  font-weight: bold;
}

.custom-content {
  display: flex;
  flex-direction: column;
  
  text:first-child {
    font-size: var(--fu-font-size-base);
    color: var(--fu-text-color);
  }
  
  text:last-child {
    font-size: var(--fu-font-size-sm);
    color: var(--fu-text-color-secondary);
  }
}
</style> 